/*
 * @Author: yangzonglong
 * @Date: 2021-06-09 13:38:15
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 15:31:32
 * @Auditor:
 */
import React, { memo } from 'react';
import { Input, Checkbox, Row, Col } from 'antd';
import { useDrag, DragSourceMonitor, useDrop } from 'react-dnd';
import styles from './style.module.scss';
import Icon from './../../../components/fd/components/icon/Icon';

const type = 'optionSettingItem';

const style: React.CSSProperties = {
  marginBottom: '.5rem',
  cursor: 'move',
};

const T = window.$app.t

interface ItemProps {
  originalIndex: number;
  id: string;
  type: string;
}

interface IProps {
  originalIndex: number;
  item: any;
  change(index: number, k: string, v: string | boolean): void;
  move(draggedId: string, hoverId: string): void;

}

const OptionSettingItem = ({ originalIndex, item, change, move, }: IProps) => {


  const [{ isDragging }, drag, dragPreview] = useDrag(
    {
      type,
      item: { type, originalIndex, id: item.action as string },

      collect: (moniter: DragSourceMonitor) => ({
        isDragging: moniter.isDragging(), // dragCollect.isDragging
      }),
    },
    []
  );

  const [, drop] = useDrop(
    () => ({
      accept: type,
      canDrop: () => false,
      hover: ({ id: draggedId }: ItemProps) => {
        if (draggedId !== item.action) {
          move(draggedId, item.action as string);
        }
      },
    }),
    [move]
  );
  const opacity = isDragging ? 0 : 1;

  return (
    <li ref={(node) => dragPreview(drop(node))} style={{ ...style, opacity }}>
      <span ref={(node) => drag(node)} className={styles.move}>
        <Icon icon="&#xe671;" />
      </span>
      <div>
        <Row justify='space-between' style={{ marginBottom: 13 }}>
          <Col span={6}><span>{item.label}</span></Col>
          <Col span={12} style={{ textAlign: 'right' }}>
            <Checkbox onChange={e => {
              change(originalIndex, 'checked', e.target.checked);
            }} checked={item.checked}>{T('enable')}</Checkbox>
            <Checkbox onChange={e => {
              change(originalIndex, 'shortcut', e.target.checked);
            }} checked={item.shortcut}>{T('shortcut')}</Checkbox>
          </Col>
        </Row>

        <Row gutter={8}>
          <Col span={12}> <Input onChange={e => {
            change(originalIndex, 'buttonText', e.target.value);
          }} value={item.buttonText} placeholder={T('buttonCn')}></Input></Col>

          <Col span={12}> <Input onChange={e => {
            change(originalIndex, 'buttonTextEn', e.target.value);
          }} value={item.buttonTextEn} placeholder={T('buttonEn')}></Input></Col>
        </Row>

      </div>
    </li>
  );
};

export default memo(OptionSettingItem);
